<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <link href="../../resources/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet"
          type="text/css"/>
    <script src="../../resources/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="../../resources/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>


    <style>
        li {
            font-family: "黑体";
            font-size: 14px
        }

        .row {
            margin-left: 2px
        }

        #table {
            overflow: scroll
        }

        .t_bt {
            display: inline-block;
            background: #000;
            color: #FFF;
            font-size: 13px;
            line-height: 22px;
            text-transform: uppercase;
            border: none;
            outline: none;
            transition: 0.2s;
            -webkit-transition: 0.2s;
            -moz-transition: 0.2s;
            -o-transition: 0.2s;
        }
    </style>


</head>
<body>
<div>
    <!--导航-->
    <div align="right">
        <div>
            <a href="addUser.html" th:href="@{/link/addUser}"
                              style="margin-right:13px; text-decoration:underline">添加用户</a>
        </div>
    </div>
        <div class="tabbable" id="staffManage">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#checkOutStaffManage" data-toggle="tab" onclick="findByRoleId(2)">销售员工管理</a>
            </li>
            <li>
                <a href="#storageStaffManage" data-toggle="tab" onclick="findByRoleId(3)">库存员工管理</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="checkOutStaffManage">
                <div id="showCheckOutStaffManage" class="row">
                    <div class="col-md-12" style="margin-top:20px">
                        <div class="panel panel-info">
                            <div class="panel-heading">收银员工信息</div>
                            <table id="table" class="table table-striped table-bordered table-hover datatable">
                                <thead id="item">
                                    　　　　　　　　　　
                                    <th id="staffAccount">账号</th>
                                    　　　　　　　　　　
                                    <th id="staffName">姓名</th>
                                    　　　　　　　　　　
                                    <th id="staffEmail">邮箱</th>
                                    　　　　　　　　　　
                                    <th id="staffPhoneNumber">手机号</th>
                                    　　　　　　　　　　
                                    <th id="staffSex">性别</th>
                                    　　　　　　　　　　
                                    <th id="staffDate">入职时间</th>

                                    <th id="operator">操作</th>
                                    　　　　　　　　　　
                                </thead>
                                　　　　　　　　　　
                                <tbody id="tbody2">
                                　　　　　　　　　　
                                </tbody>
                                　　　　　　　　　　　　
                            </table>
                            　　　　　　　　　　　
                        </div>
                        　　　　　　　　　　　
                    </div>
                    　　　　　　　　　
                </div>
            </div>
            <div class="tab-pane fade" id="storageStaffManage">
                <div id="showCheckOutStaffManage" class="row">
                    <div class="col-md-12" style="margin-top:20px">
                        <div class="panel panel-info">
                            <div class="panel-heading">库存员工信息</div>
                            <table id="table" class="table table-striped table-bordered table-hover datatable">
                                <thread id="item" >
                                    　　　　　　　　　　
                                    <th id="staffAccount">账号</th>
                                    　　　　　　　　　　
                                    <th id="staffName">姓名</th>
                                    　　　　　　　　　　
                                    <th id="staffEmail">邮箱</th>
                                    　　　　　　　　　　
                                    <th id="staffPhoneNumber">手机号</th>
                                    　　　　　　　　　　
                                    <th id="staffSex">性别</th>
                                    　　　　　　　　　　
                                    <th id="staffDate">入职时间</th>

                                    <th id="operator">操作</th>
                                    　　
                                    　　　　　　　　　　　
                                </thread>
                                　　　　　　　　　　
                                <tbody id="tbody3" >
                                　　　　　　　　　　
                                </tbody>
                                　　　　　　　　　　　　
                            </table>
                            　　　　　　　　　　　
                        </div>
                        　　　　　　　　　　　
                    </div>
                    　　　　　　　　　
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labeledby="modalTitle"
     style="margin-top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <center><h4 class="modal-title" style="font-family:'黑体'">修改会员信息</h4></center>
            </div>
            <center>
                <div class="modal-body">

                    <form method="post" th:action="@{/manage/userModify}" action="javascript:void;"
                          style="padding-top:10px">
                        <input type="hidden" id="userId" name="userId"/>

                        <div>
						<span>用户姓名:
						</span> <input type="text" name="userName" id="userName"/>
                        </div>
                        <br/>

                        <div>
						<span>用户邮箱:
						</span> <input type="text" name="userEmail" id="userEmail"/>
                        </div>
                        <br/>

                        <div>
						<span>手机号:&nbsp;&nbsp;&nbsp;&nbsp;
						</span> <input type="text" name="userPhoneNumber" id="userPhoneNumber"/>
                        </div>
                        <br/>
                        <hr/>
                        <input class='t_bt' id="okbt" type="button" value="提交" onclick="submitModifyUser()" style="margin-top: 10px"/>
                        <input class='t_bt' id="cancelbt" type="button" value="取消" onclick="cancelModify()" style="margin-top: 10px;margin-left: 20px"/>

                    </form>

                </div>
            </center>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    // <![CDATA[
    window.onload = function () {
        findByRoleId(2);
    }
    function findByRoleId(roleId) {
        $.ajax({
            url: '/manage/findByRole',
            data: {"roleId": roleId},
            type: 'post',
            dataType: 'text',
            success: function (result) {
                var resultJson = eval("(" + result + ")");
                var data = resultJson.data;
                if (resultJson.isSuccess) {
                    var code = "";
                    for (var i = 0; i < data.length; i++) {
                        var temp = "tr" + i;
                        code += "<tr id=" + temp + ">" +
                                "<td>" + data[i].account + "</td>" +
                                "<td id=tdn" + i + ">" + data[i].name + "</td>" +
                                "<td id=tde" + i + ">" + data[i].email + "</td>" +
                                "<td id=tdp" + i + ">" + data[i].phone + "</td>" +
                                "<td>" + data[i].gender + "</td>" +
                                "<td>" + data[i].onJobTime + "</td>" +
                                "<td><span class='glyphicon glyphicon-trash operate' title='删除' onclick='deleteUser(" + data[i].id + ",\"" + temp + "\")'></span>&nbsp;&nbsp;&nbsp;&nbsp;" +
                                "<span class='glyphicon glyphicon-edit operate' title='修改' onclick='modifyUser(" + data[i].id + "," + i + ")'></span></td>" +
                                "</tr>";
                    }
                    $("#tbody2").empty().append();
                    $("#tbody3").empty().append();
                    if (roleId == 2)$("#tbody2").empty().append(code);
                    else {
                        $("#tbody3").empty().append(code);
                    }
                }
            }
        })
    }
    function deleteUser(arg, trId) {
        if (window.confirm("确认要删除该用户吗?")) {
            $.ajax({
                url: '/manage/deleteUser',
                data: {"userId": arg},
                type: 'post',
                dataType: 'text',
                success: function (result) {
                    var resultJson = eval("(" + result + ")");
                    if (resultJson.isSuccess) {
                        $('#' + trId).parent().remove();
                    }
                }
            });
        }
    }
    var v;
    function modifyUser(id, arg) {
        v = arg;
        $('#secondModal').modal('show');
        $('#userId').val('' + id);
        $('#userName').val($("#tdn" + v).text());
        $('#userEmail').val($("#tde" + v).text());
        $('#userPhoneNumber').val($("#tdp" + v).text());
    }
    function cancelModify() {
        $('#secondModal').modal('hide');
    }
    function trim(arg){
        var reSpace=/^\s*(.*?)\s*$/;
        return arg.replace(reSpace,"$1");
    };
    function submitModifyUser() {
        var userId = $('#userId').val();
        var userName = $('#userName').val();
        var userEmail = $('#userEmail').val();
        var userPhoneNumber = $('#userPhoneNumber').val();
        if(trim(userName)=="") {
            alert("用户名不能为空！");
            return ;
        }
        var emailPattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        if(!emailPattern.test(trim(userEmail))){
            alert("邮箱格式不正确！");
            return;
        }
        var phonePattern = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if(!phonePattern.test(trim(userPhoneNumber))){
            alert("电话号码不正确！");
            return;
        }
        $.ajax({
            url: '/manage/updateUser',
            data: {"userId": userId, "userName": userName, "userEmail": userEmail, "userPhoneNumber": userPhoneNumber},
            type: 'post',
            dataType: 'text',
            success: function (result) {
                var data = eval("(" + result + ")");
                if (data.isSuccess) {
                    $('#secondModal').modal('hide');
                    $("#tdn" + v).text($('#userName').val());
                    $("#tde" + v).text($('#userEmail').val());
                    $("#tdp" + v).text($('#userPhoneNumber').val());
                    alert("用户数据更新成功!");
                } else {
                    //$('#secondModal').modal('hide');
                    alert("用户更新失败！")
                }
            }
        });
    }
    // ]]>

</script>
</html>
